<template>
  <div>
    <div class="news">
      <span class="icon">
             <i class="iconfont icon-tongzhi1"></i>
           </span>
      <div class="newsconten" :class="{animation:isAnimation}" :style="{top:+-35*selectNum+'px'}">
        <div class="newsitem">
          {{newsList[newsList.length-1].msg}}
        </div>
        <div class="newsitem" :key="item.id" v-for="item in newsList">
          {{item.msg}}
        </div>
        <div class="newsitem">
          {{this.newsList[0].msg}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "news",
    data() {
      return {
        selectNum: 1,
        startNum: 1,
        isAnimation: true,
        top: -35,
        newsList: [{
            id: 1,
            msg: " 代理专属活动火爆上线，红包拿到手软！"
          },
          {
            id: 2,
            msg: " 1月12日-1月19日，日进斗金！"
          },
          {
            id: 3,
            msg: " 1月22日-1月28日，开房见喜！"
          },
        ]
      };
    },
    methods: {
      initAnimation: function() {
        let that = this;
        let len = this.newsList.length;
        that.top = -35 * (that.startNum + 1);
        //console.log(len)
        setInterval(function() {
          that.top = that.top - 35;
          that.selectNum = (that.selectNum + 1) % (len + 2);
          if (that.selectNum == 0) {
            that.selectNum = 2;
          }
          //console.log(that.selectNum);
        }, 3000);
      }
    },
    mounted() {
      this.initAnimation();
    }
  };
</script>
<style lang="scss" scoped>
  .news {
    font-size: 15px;
    height: 35px;
    padding-left: 35px;
    background: #ece6d6;
    overflow: hidden;
    position: relative;
    color: #441900;
    .icon {
      position: absolute;
      left: 10px;
      top: 9px;
      .iconfont {
        font-size: 17px;
      }
    }
    .newsconten {
      position: absolute;
      top: 0;
    }
    div.newsitem {
      height: 35px;
      line-height: 35px;
    }
    .animation {
      transition: all 1.5s;
    }
  }
</style>

